<template>
  <div class="dashboard-cls">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover" class="mgb20" style="height: 252px">
          <div class="user-info">
            <el-avatar :size="120" :src="userSrc" />
            <div class="user-info-cont">
              <div class="user-info-name">{{ name }}</div>
              <div>{{ role }}</div>
            </div>
          </div>
          <div class="user-info-list">
            上次登录时间：
            <span>{{ lastLoginDate }}</span>
          </div>
          <div class="user-info-list">
						上次登录地点：
						<span>{{sysLoginLog?.ipAttribution}}</span>
					</div>
        </el-card>
        <el-card shadow="hover" style="height: 160px">
          <template #header>
            <div class="clearfix">
              <span>投票分类</span>
            </div>
          </template>
          文本
          <el-progress
            :percentage="tTypeVoteObj.textPercent"
            color="#42b983"
          ></el-progress>
          图文
          <el-progress
            :percentage="tTypeVoteObj.picPercent"
            color="#f1e05a"
          ></el-progress>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-row :gutter="20" class="mgb20">
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <el-icon class="grid-con-icon"><User /></el-icon>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ userAmount }}</div>
                  <div>累计用户量</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                <el-icon class="grid-con-icon"><ChatDotRound /></el-icon>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ messageAmount }}</div>
                  <div>系统消息</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <el-icon class="grid-con-icon"><Goods /></el-icon>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ tvoteAmount }}</div>
                  <div>投票主题</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-card shadow="hover" style="height: 310px">
          <template #header>
            <div class="clearfix meno-cls">
              <div class="left-cls">
                <div>备忘录</div>
                <div
                  class="all-cls"
                  :class="isFinish == '' ? 'select-cls' : ''"
                  @click="changeHandler('')"
                  v-hasPerm="['system:user:list']"
                >
                  全部
                </div>
                <div
                  class="unFinish-cls"
                  :class="isFinish == '0' ? 'select-cls' : ''"
                  @click="changeHandler('0')"
                  v-hasPerm="['system:user:list']"
                >
                  未完成
                </div>
                <div
                  class="finish-cls"
                  :class="isFinish == '1' ? 'select-cls' : ''"
                  @click="changeHandler('1')"
                  v-hasPerm="['system:user:list']"
                >
                  已完成
                </div>
                <!-- <div class="add-cls">
                  <el-icon><DocumentAdd /></el-icon>
                </div> -->
              </div>
              <el-button
                style="float: right; padding: 3px 0"
                v-hasPerm="['system:user:list']"
                text
                @click="router.push('/sys/memo')"
                >更多<el-icon><DArrowRight /></el-icon
              ></el-button>
            </div>
          </template>
            <el-table :show-header="false" :data="memoList" style="width: 100%">
              <el-table-column width="40">
                <template #default="scope">
                  <input type="checkbox" :checked="scope.row.isFinish" @change="doneHandler(scope.row)">
                </template>
              </el-table-column>
              <el-table-column>
                <template #default="scope">
                  <div
                    class="todo-item"
                    :class="{
                      'todo-item-del': !!scope.row.isFinish,
                    }"
                  >
                    <div @click="doneHandler(scope.row)">
                      {{ scope.row.title }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="createTime"
                align="center"
                width="180"
              ></el-table-column>
            </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover">
          <schart
            ref="bar"
            class="schart"
            canvasId="bar"
            :options="options"
          ></schart>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <schart
            ref="line"
            class="schart"
            canvasId="line"
            :options="options2"
          ></schart>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="dashboard">
import Schart from "vue-schart";
import { reactive, ref } from "vue";
import dayjs from "dayjs";
import {
  messageCount,
  tVoteTypeCount,
  tVoteTypeMonth,
  tVoteTypeWeek,
  tvoteCount,
  userCount,
  userViews,
  getLastLoginAddress
} from "@/api/dashBoard";
import { DArrowRight, DocumentAdd } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { list, updateMemoFinish } from "@/api/memo";
import { ElMessage, ElMessageBox } from "element-plus";

const currentUserObj = sessionStorage.getItem("currentUser");
const currentUser: any = ref({});
const userSrc = ref("");
const router = useRouter();
const lastLoginDate = ref("");
const memoList = ref([]);
const role = ref("");
const name=ref('')
const isFinish = ref("");
//累计用户量
const userAmount = ref(0);
const getUserAmount = async () => {
  const result = await userCount();
  if (result.data.code == 200) {
    userAmount.value = result.data.data;
  }
};
//系统消息数量
const messageAmount = ref(0);
const getMessageAmount = async () => {
  const result = await messageCount();
  if (result.data.code == 200) {
    messageAmount.value = result.data.data;
  }
};
//投票主题数量
const tvoteAmount = ref(0);
const getTvoteAmount = async () => {
  const result = await tvoteCount();
  if (result.data.code == 200) {
    tvoteAmount.value = result.data.data;
  }
};
const options:any = ref({});
const options2:any = ref({});

//投票主题分类数量
const tTypeVoteObj:any = ref({});
const getTVoteCount = async () => {
  const result = await tVoteTypeCount();
  if (result.data.code == 200) {
    tTypeVoteObj.value = result.data.data;
  }
};
//最近5天投票分类统计
const tVoteTypeWeekObj: any = ref({});
const getTVoteTypeWeek = async () => {
  const result = await tVoteTypeWeek(7);
  if (result.data.code == 200) {
    tVoteTypeWeekObj.value = result.data.data;
    options.value = {
      type: "bar",
      title: {
        text: "最近一周投票分类",
      },
      xRorate: 25,
      labels: tVoteTypeWeekObj.value.days,
      datasets: [
        {
          label: "文本",
          data: tVoteTypeWeekObj.value.texts,
        },
        {
          label: "图文",
          data: tVoteTypeWeekObj.value.pics,
        },
      ],
    };
  }
};
//最近5月投票分类统计
const tVoteTypeMonthObj: any = ref({});
const getTVoteTypeMonth = async () => {
  const result = await tVoteTypeMonth(6);
  if (result.data.code == 200) {
    tVoteTypeMonthObj.value = result.data.data;
    options2.value = {
      type: "bar",
      title: {
        text: "最近半年投票分类",
      },
      xRorate: 25,
      labels: tVoteTypeMonthObj.value.months,
      datasets: [
        {
          label: "文本",
          data: tVoteTypeMonthObj.value.texts,
        },
        {
          label: "图文",
          data: tVoteTypeMonthObj.value.pics,
        },
      ],
    };
  }
};
const memoFrom = ref({
  query: "",
  pageName: 1,
  pageSize: 5,
  isFinish: "",
});
const getMemoList = async () => {
  const result = await list(memoFrom.value);
  if (result.data.code == 200) {
    memoList.value = result.data.data.list;
  }
};
const changeHandler = (data) => {
  isFinish.value = data;
  memoFrom.value.isFinish = data;
  getMemoList();
};

const doneHandler = async (row) => {
  if (row.isFinish == 1) {
    row.isFinish = 0;
  } else {
    row.isFinish = 1;
  }

  const result = await updateMemoFinish(row);
  if (result.data.code == 200) {
    ElMessage({
      type: "success",
      message: "操作成功",
    });
    getMemoList();
  } else {
    ElMessage({
      type: "error",
      message: result.data.msg,
    });
  }
};
const sysLoginLog:any=ref({})
const getLastLoginAddressHandler=async()=>{
  const result=await getLastLoginAddress();
  if(result.data.code==200){
    if(result.data.data.length){
      sysLoginLog.value=result.data.data[0]
    }
  }

}
const init = () => {
  if (currentUserObj) {
    currentUser.value = JSON.parse(currentUserObj);
    userSrc.value = `${import.meta.env.VITE_APP_WEB_API}/image/userAvatar/${
      currentUser.value.avatar
    }`;
    lastLoginDate.value = dayjs(currentUser.value.lastLoginDate).format(
      "YYYY-MM-DD HH:mm:ss"
    );
    role.value = currentUser.value.roles;
    name.value=currentUser.value.username;
    getLastLoginAddressHandler()
  }
  
  getUserAmount();
  getMessageAmount();
  getTvoteAmount();
  getTVoteCount();
  getTVoteTypeWeek();
  getTVoteTypeMonth();
};
init();
getMemoList();
</script>

<style scoped lang="less">
.dashboard-cls {
  font-size: 14px;
}
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(100, 213, 114);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 40px;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
  cursor: pointer;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 300px;
}
.meno-cls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left-cls {
    display: flex;
    align-items: center;
    .add-cls {
      margin-top: 6px;
      margin-left: 3px;
      color: #2d8cf0;
      cursor: pointer;
    }
  }
  .all-cls {
    margin-left: 30px;
    cursor: pointer;
  }
  .unFinish-cls {
    margin-left: 10px;
    cursor: pointer;
  }
  .finish-cls {
    margin-left: 10px;
    cursor: pointer;
  }
  .select-cls {
    color: #2d8cf0;
  }
}
.user-info-name{
  margin-bottom:5px;
}
</style>
